<style lang="less">
  .logo {
    text-align:center;
    padding:80px 0 100px;
  }
  .inputWrap {
    box-sizing:border-box;
    height:49px;
    width:100%;
    padding:0 20px;
    border-bottom:1px solid #dbdbdb;
    label {
      width:50px;
    }
    input{
      padding:0 10px;
      background-color:transparent;
      height:49px;
      line-height:49px;
    }
  }
  .facLogin {
    margin:20px auto;
    height:45px;
    line-height:45px;
    width:80vw;
  }
  .scanResult {
    height:150px;
    width:100%;
    margin-top: calc(~"(100vh - 150px) / 2");
    .tip {
      display:block;
      width:100%;
      text-align:center;
      height:50px;
      color: #3a3f51;
    }
    .tip:first-of-type{
      height:100px;
      line-height:100px;
    }
  }
  .success {
    color:#27c24c;
  }
  .fail {
    color:#3a3f51;
  }
</style>

<template>
  <div class="contain">
    <div class="loader-base" v-if="showLoad"><div class="loader-wrap"></div></div>

    <template v-if="showLogin">
      <div class="logo"><i class="iconfont icon-logs ftExBig gray"></i></div>
      <div class="inputWrap">
        <label><i class="iconfont icon-account ft20 gray"></i></label>
        <input class="ft17" placeholder="账户" v-model="account" />
      </div>
      <div class="inputWrap">
        <label><i class="iconfont icon-key ft20 gray"></i></label>
        <input class="ft17" placeholder="密码" type="password" v-model="pwd"/>
      </div>
      <div class="facLogin agbtn btn-info" @click="checkLogin">登录</div>
    </template>

    <template v-else>
      <div class="scanResult">
        <span class="tip"><i class="iconfont ftBigger" :class="{ 'icon-success success' : success, 'icon-error fail': fail }"></i></span>
        <span class="tip ft20">{{txt}}</span>
      </div>
    </template>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        showLoad: false,
        account:'',
        pwd:'',
        showLogin:true,
        txt:'',
        success: false,
        fail: false,
      }
    },
    computed:{
      routeQuery(){
        return this.$route.query;
      },
    },
    watch: {
      
    },
    methods: {
      checkLogin(){
        if (this.account == "") {
          this.$vux.toast.show({
            type: "warn", //success, warn, cancel, text
            text: "登录账户不能为空"
          });
          return false;
        }

        if (this.pwd == "") {
          this.$vux.toast.show({
            type: "warn", //success, warn, cancel, text
            text: "密码不能为空"
          });
          return false;
        } else if(this.pwd != 'ygw7d'){
          this.$vux.toast.show({
            type: "warn", //success, warn, cancel, text
            text: "密码错误"
          });
          return false;
        }

        let loginData = {
          loginDate : new Date(),
          account : this.account,
          pwd: this.pwd
        }
        localStorage.setItem('facilityLogin', JSON.stringify(loginData));
        if(localStorage.facilityLogin && localStorage.facilityLogin != '' && JSON.parse(localStorage.facilityLogin).pwd == 'ygw7d') {
          this.showLogin = false;
          this.goAttendance();
        } else {
          alert('系统忙，请重新登录')
        }
      },

      loginState(){
        if(this.routeQuery.id == null)
        {
          this.$vux.toast.show({
            type: "warn", //success, warn, cancel, text
            text: "订单信息错误，请重新扫码"
          });
        } 

        if(localStorage.facilityLogin && localStorage.facilityLogin != '') {
          if(JSON.parse(localStorage.facilityLogin).pwd != 'ygw7d') {
            this.showLogin = true;
          }
          else {
            this.showLogin = false;
            this.goAttendance();
          }
        } else {
          this.showLogin = true;
        }
      },

      goAttendance(){
        let self = this,
            query = {
              Guid : this.routeQuery.id,
            }
        this.showLoad = true;
        this.Ajax.post("createAttendance", query).then(function (resp) {
          self.showLoad = false;
          if(resp.IsSuccess) {
            self.success = true;
            self.txt = "签到成功";
          } else {
            self.fail = true;
            self.txt = resp.ErrorMessage;
          }
        })
        .catch(err => {
          self.showLoad = false;
          self.$vux.toast.show({
            type: "warn", //success, warn, cancel, text
            text: err,
          });
        });
      }
    },

    created() {
      if(window.Storage && window.localStorage && window.localStorage instanceof Storage){
        this.loginState();
      } else {
        alert('很抱歉，您的设备不支持使用缓存，无法使用本系统')
      }
    }
  }
</script>

